{#
# Copyright 2018 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#}
<!doctype html>
<html>
  <head>
    <title>Google App Engine Flexible Environment - Python Websockets Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>

    <!-- [START gae_flex_websockets_form] -->
    <p>Chat demo</p>
    <form id="chat-form">
      <textarea id="chat-text" placeholder="Enter some text..."></textarea>
      <button type="submit">Send</button>
    </form>

    <div>
      <p>Messages:</p>
      <ul id="chat-response"></ul>
    </div>

    <div>
      <p>Status:</p>
      <ul id="chat-status"></ul>
    </div>
    <!-- [END gae_flex_websockets_form] -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    // [START gae_flex_websockets_js]
    $(function() {
      /* If the main page is served via https, the WebSocket must be served via
         "wss" (WebSocket Secure) */
      var scheme = window.location.protocol == "https:" ? 'wss://' : 'ws://';
      var webSocketUri =  scheme
                          + window.location.hostname
                          + (location.port ? ':'+location.port: '')
                          + '/chat';

      /* Get elements from the page */
      var form = $('#chat-form');
      var textarea = $('#chat-text');
      var output = $('#chat-response');
      var status = $('#chat-status');

      /* Helper to keep an activity log on the page. */
      function log(text){
        status.append($('<li>').text(text))
      }

      /* Establish the WebSocket connection and register event handlers. */
      var websocket = new WebSocket(webSocketUri);

      websocket.onopen = function() {
        log('Connected');
      };

      websocket.onclose = function() {
        log('Closed');
      };

      websocket.onmessage = function(e) {
        log('Message received');
        output.append($('<li>').text(e.data));
      };

      websocket.onerror = function(e) {
        log('Error (see console)');
        console.log(e);
      };

      /* Handle form submission and send a message to the websocket. */
      form.submit(function(e) {
        e.preventDefault();
        var data = textarea.val();
        websocket.send(data);
      });
    });
    // [END gae_flex_websockets_js]
    </script>
  </body>
</html>
